<template>
    <div class="buttonWrapper" @click="listener($event)">
        <div id="DCJ">
            <KindofButton :kindof="{color:'#2dff01',text:'定操',}"></KindofButton>
            <div class="title">定操按钮</div>
        </div>
        <div id="SJ">
            <keyButton></keyButton>
            <div class="title">SJ按钮</div>
        </div>
        <div id="FCJ">
            <KindofButton :kindof="{color:'#f6ff00',text:'反操',}"></KindofButton>
            <div class="title">反操按钮</div>
        </div>
        <div id="LJ">
            <KindofButton :kindof="{color:'#00fe74',text:'LJ',}"></KindofButton>
            <div class="title">LJ按钮</div>
        </div>
        <div id="UJ">
            <KindofButton :kindof="{color:'#f7f786',text:'UJ',}"></KindofButton>
            <div class="title">UJ按钮</div>
        </div>
        <div id="YXJ">
            <KindofButton :kindof="{color:'#b7b8b7',text:'YXJ',}"></KindofButton>
            <div class="title">YXJ按钮</div>
        </div>
        <div id="MJ">
            <KindofButton :kindof="{color:'#ff9d00',text:'MJ',}"></KindofButton>
            <div class="title">MJ按钮</div>
        </div>
        <div id="stop">
            <stopButton></stopButton>
            <div class="title">紧急停车按钮</div>
        </div>
        <div id="All">
            <AllChoiceButton></AllChoiceButton>
            <div class="title">全部触发按钮</div>
        </div>
        <div @click="reset">
            <KindofButton :kindof="{color:'#8b97f7',text:'直接复位',}"></KindofButton>
            <div class="title">直接复位</div>
        </div>
    </div>
</template>

<script setup>
import stopButton from '@/components/custombutton/stopButton.vue'
import AllChoiceButton from "@/components/custombutton/allChoiceButton.vue";
import keyButton from "@/components/custombutton/keyButton.vue";
import KindofButton from '@/components/custombutton/KindofButton.vue'
import bus from "vue3-eventbus";
import {getCurrentInstance} from "vue";
import {useStore} from "vuex";
const store = useStore();
import { ElMessage } from 'element-plus'
components:{stopButton, AllChoiceButton, keyButton,KindofButton };
let ws = getCurrentInstance().proxy.$ws;
function reset(){
    bus.emit('reset');
}

function listener(e){
    let id = e.path[2].getAttribute('id');
    if(id === null){
        ElMessage({
            showClose: true,
            message: '不要点边界点中间白色区域!',
            type: 'warning',
        });
    }else{
        let  a = {order:"SetRelay",data:{relay:id,"state":true}}
        ws.send(JSON.stringify(a));
    }
}

</script>

<style scoped lang="scss">
.buttonWrapper{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items:center;
    width: 100%;
    height: 100%;
    overflow: auto;
    .title{
        color:#ffffff;
        text-align: center;
    }
}

</style>
